<template>
  <view class="box">
    <view class="box0">
      <!-- 头 -->
      <view class="box1">
        <view class="box2">
          <view class="box21">全部</view>
          <view class="box22">待付款</view>
          <view class="box23">待发货</view>
          <view class="box24">待收货</view>
          <view class="box25">待评价</view>
        </view>
        <!-- 红 -->
        <view class="box26"></view>
      </view>
      <!-- 2 -->
      <view class="box3">
        <view class="box31">
          <view class="box311"><image src="/static/image6.png" /></view>
          <view class="box312">正茂通商户</view>
          <view class="box313">待评价</view>
          <view class="box314"><image src="/static/image7.png" /></view>
          <view class="box315">男运动鞋秋季男鞋青少年正品透...</view>
          <view class="box316">标准白、42</view>
          <view class="box317">￥890.00</view>
          <view class="box318">×1</view>
          <view class="box319">共 件商品 </view>
          <view class="box32">1</view>
          <view class="box33">合计</view>
          <view class="box34">￥890.00</view>
          <view class="box35"
            ><uv-button
              type="primary"
              shape="circle"
              size="normal"
              color="red"
              :plain="true"
              text="评价"
              @click="appraise"
            ></uv-button
          ></view>
        </view>
      </view>
      <!-- 2 -->
      <view class="box4">
        <view class="box41">
          <view class="box411"><image src="/static/image6.png" /></view>
          <view class="box412">正茂通商户</view>
          <view class="box413">待付款</view>
          <view class="box414"><image src="/static/image7.png" /></view>
          <view class="box415">男运动鞋秋季男鞋青少年正品透...</view>
          <view class="box416">标准白、42</view>
          <view class="box417">￥890.00</view>
          <view class="box418">×1</view>
          <view class="box419">共 件商品 </view>
          <view class="box42">1</view>
          <view class="box43">合计</view>
          <view class="box44">￥890.00</view>
          <view class="index">
            <view class="index1">还差 人，剩余</view>
            <view class="index2">1</view>
            <view class="index3">23:45:36</view>
          </view>
          <view class="box45"
            ><uv-button
              type="primary"
              shape="circle"
              size="normal"
              color="red"
              :plain="true"
              text="立即付款"
            ></uv-button
          ></view>
        </view>
        <view class="box46"
          ><uv-button
            type="primary"
            shape="circle"
            size="normal"
            color="darkgray"
            :plain="true"
            text="取消订单"
          ></uv-button
        ></view>
      </view>
      <!-- 3 -->
      <view class="box5">
        <view class="box51">
          <view class="box511"><image src="/static/image6.png" /></view>
          <view class="box512">正茂通商户</view>
          <view class="box513">待付款</view>
          <view class="box514"><image src="/static/image7.png" /></view>
          <view class="box515">男运动鞋秋季男鞋青少年正品透...</view>
          <view class="box516">标准白、42</view>
          <view class="box517">￥890.00</view>
          <view class="box518">×1</view>
          <view class="box519">共 件商品 </view>
          <view class="box52">1</view>
          <view class="box53">合计</view>
          <view class="box54">￥890.00</view>
          <view class="box55"
            ><uv-button
              type="primary"
              shape="circle"
              size="normal"
              color="red"
              :plain="true"
              text="立即付款"
            ></uv-button
          ></view>
        </view>
        <view class="box56"
          ><uv-button
            type="primary"
            shape="circle"
            size="normal"
            color="darkgray"
            :plain="true"
            text="取消订单"
          ></uv-button
        ></view>
      </view>
      <!-- 4 -->
      <view class="box6">
        <view class="box61">
          <view class="box511"><image src="/static/image6.png" /></view>
          <view class="box512">正茂通商户</view>
          <view class="box513">待付款</view>
          <view class="box514"><image src="/static/image7.png" /></view>
          <view class="box515">男运动鞋秋季男鞋青少年正品透...</view>
          <view class="box516">标准白、42</view>
          <view class="box517">￥890.00</view>
          <view class="box518">×1</view>
          <view class="box519">共 件商品 </view>
          <view class="box52">1</view>
          <view class="box53">合计</view>
          <view class="box54">￥890.00</view>
          <view class="box55"
            ><uv-button
              type="primary"
              shape="circle"
              size="normal"
              color="red"
              :plain="true"
              text="立即付款"
            ></uv-button
          ></view>
        </view>
        <view class="box56"
          ><uv-button
            type="primary"
            shape="circle"
            size="normal"
            color="darkgray"
            :plain="true"
            text="取消订单"
          ></uv-button
        ></view>
      </view>
      <!-- 5 -->
      <view class="box7">
        <view class="box71">
          <view class="box511"><image src="/static/image6.png" /></view>
          <view class="box512">正茂通商户</view>
          <view class="box513">待付款</view>
          <view class="box514"><image src="/static/image7.png" /></view>
          <view class="box515">男运动鞋秋季男鞋青少年正品透...</view>
          <view class="box516">标准白、42</view>
          <view class="box517">￥890.00</view>
          <view class="box518">×1</view>
          <view class="box519">共 件商品 </view>
          <view class="box52">1</view>
          <view class="box53">合计</view>
          <view class="box54">￥890.00</view>
          <view class="box55"
            ><uv-button
              type="primary"
              shape="circle"
              size="normal"
              color="red"
              :plain="true"
              text="立即付款"
            ></uv-button
          ></view>
        </view>
        <view class="box56"
          ><uv-button
            type="primary"
            shape="circle"
            size="normal"
            color="darkgray"
            :plain="true"
            text="取消订单"
          ></uv-button
        ></view>
      </view>
      <!-- 6-->
      <view class="box8">
        <view class="box81">
          <view class="box511"><image src="/static/image6.png" /></view>
          <view class="box512">正茂通商户</view>
          <view class="box513">待付款</view>
          <view class="box514"><image src="/static/image7.png" /></view>
          <view class="box515">男运动鞋秋季男鞋青少年正品透...</view>
          <view class="box516">标准白、42</view>
          <view class="box517">￥890.00</view>
          <view class="box518">×1</view>
          <view class="box519">共 件商品 </view>
          <view class="box52">1</view>
          <view class="box53">合计</view>
          <view class="box54">￥890.00</view>
          <view class="box55"
            ><uv-button
              type="primary"
              shape="circle"
              size="normal"
              color="red"
              :plain="true"
              text="立即付款"
            ></uv-button
          ></view>
        </view>
        <view class="box56"
          ><uv-button
            type="primary"
            shape="circle"
            size="normal"
            color="darkgray"
            :plain="true"
            text="取消订单"
          ></uv-button
        ></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    appraise(){
      uni.navigateTo({
         url: '/pages/appraise/appraise'
      });
    }
  },
};
</script>

<style>
/* 2 */

.index {
  margin-left: 50rpx;
}
.index1 {
  font-size: 25rpx;
  margin-top: 55rpx;
}
.index2 {
  font-size: 25rpx;
  color: red;
  margin-top: -32rpx;
  margin-left: 48rpx;
}
.index3 {
  font-size: 25rpx;
  color: red;
  margin-left: 160rpx;
  margin-top: -35rpx;
}
/* 6 */
.box81 {
  background-color: white;
  margin-top: 80rpx;
  height: 600rpx;
}
/* 5 */
.box71 {
  background-color: white;
  margin-top: 80rpx;
  height: 600rpx;
}
/* 4 */
.box61 {
  background-color: white;
  margin-top: 80rpx;
  height: 600rpx;
}
/* 3 */
.box56 {
  width: 150rpx;
  margin-left: 355rpx;
  margin-top: -130rpx;
}
.box54 {
  margin-left: 570rpx;
  font-size: 32rpx;
  margin-top: -40rpx;
}
.box53 {
  margin-left: 515rpx;
  margin-top: -40rpx;
  font-size: 28rpx;
}
.box52 {
  margin-left: 394rpx;
  margin-top: -42rpx;
}
.box519 {
  margin-left: 365rpx;
  color: darkgray;
  margin-top: 80rpx;
}
.box518 {
  margin-left: 450rpx;
  margin-top: -38rpx;
  color: darkgray;
  font-size: 28rpx;
}
.box517 {
  margin-left: 290rpx;
  font-size: 32rpx;
  margin-top: 45rpx;
}
.box516 {
  margin-left: 290rpx;
  font-size: 28rpx;
  color: darkgray;
  margin-top: 20rpx;
}
.box515 {
  margin-left: 290rpx;
  font-size: 28rpx;
  margin-top: -220rpx;
}
.box55 {
  width: 150rpx;
  margin-left: 530rpx;
  margin-top: 37rpx;
}
.box514 image {
  width: 230rpx;
  height: 233rpx;
  margin-left: 48rpx;
  margin-top: 35rpx;
}
.box513 {
  padding-left: 600rpx;
  color: red;
  margin-top: -40rpx;
}
.box512 {
  margin-left: 120rpx;
  margin-top: -60rpx;
}
.box511 image {
  width: 70rpx;
  height: 65rpx;
  padding-left: 40rpx;
  margin-top: 20rpx;
}
.box51 {
  background-color: white;
  margin-top: 80rpx;
  height: 600rpx;
}
/* 2 */
.box41 {
  background-color: white;
  margin-top: 80rpx;
  height: 600rpx;
}
.box46 {
  width: 150rpx;
  margin-left: 355rpx;
  margin-top: -130rpx;
}
.box44 {
  margin-left: 570rpx;
  font-size: 32rpx;
  margin-top: -40rpx;
}
.box43 {
  margin-left: 515rpx;
  margin-top: -40rpx;
  font-size: 28rpx;
}
.box42 {
  margin-left: 394rpx;
  margin-top: -42rpx;
}
.box419 {
  margin-left: 365rpx;
  color: darkgray;
  margin-top: 80rpx;
}
.box418 {
  margin-left: 450rpx;
  margin-top: -38rpx;
  color: darkgray;
  font-size: 28rpx;
}
.box417 {
  margin-left: 290rpx;
  font-size: 32rpx;
  margin-top: 45rpx;
}
.box416 {
  margin-left: 290rpx;
  font-size: 28rpx;
  color: darkgray;
  margin-top: 20rpx;
}
.box415 {
  margin-left: 290rpx;
  font-size: 28rpx;
  margin-top: -220rpx;
}
.box45 {
  width: 150rpx;
  margin-left: 530rpx;
  margin-top: -50rpx;
}
.box414 image {
  width: 230rpx;
  height: 230rpx;
  margin-left: 48rpx;
  margin-top: 35rpx;
}
.box413 {
  padding-left: 600rpx;
  color: red;
  margin-top: -40rpx;
}
.box412 {
  margin-left: 120rpx;
  margin-top: -60rpx;
}
.box411 image {
  width: 70rpx;
  height: 65rpx;
  padding-left: 40rpx;
  margin-top: 20rpx;
}
.box41 {
  background-color: white;
  margin-top: 80rpx;
  height: 600rpx;
}
/* 1 */
.box36 {
  width: 150rpx;
  margin-left: 355rpx;
  margin-top: -130rpx;
}
.box34 {
  margin-left: 570rpx;
  font-size: 32rpx;
  margin-top: -40rpx;
}
.box33 {
  margin-left: 515rpx;
  margin-top: -40rpx;
  font-size: 28rpx;
}
.box32 {
  margin-left: 394rpx;
  margin-top: -42rpx;
}
.box319 {
  margin-left: 365rpx;
  color: darkgray;
  margin-top: 80rpx;
}
.box318 {
  margin-left: 450rpx;
  margin-top: -38rpx;
  color: darkgray;
  font-size: 28rpx;
}
.box317 {
  margin-left: 290rpx;
  font-size: 32rpx;
  margin-top: 45rpx;
}
.box316 {
  margin-left: 290rpx;
  font-size: 28rpx;
  color: darkgray;
  margin-top: 20rpx;
}
.box315 {
  margin-left: 290rpx;
  font-size: 28rpx;
  margin-top: -220rpx;
}
.box35 {
  width: 150rpx;
  margin-left: 530rpx;
  margin-top: 37rpx;
}
.box314 image {
  width: 230rpx;
  height: 230rpx;
  margin-left: 48rpx;
  margin-top: 35rpx;
}
.box313 {
  padding-left: 600rpx;
  color: red;
  margin-top: -40rpx;
}
.box312 {
  margin-left: 120rpx;
  margin-top: -60rpx;
}
.box311 image {
  width: 70rpx;
  height: 65rpx;
  padding-left: 40rpx;
  margin-top: 20rpx;
}
.box31 {
  background-color: white;
  margin-top: 30rpx;
  height: 600rpx;
}

.box1 {
  background-color: white;
  margin-top: 40rpx;
}
.box {
  background-color: rgb(238, 233, 233);
  height: 3700rpx;
}
.box26 {
  /* border:  1rpx solid red; */
  height: 9rpx;
  background: red;
  width: 50rpx;
  margin-left: 55rpx;
  margin-top: 15rpx;
}
.box21 {
  color: red;
  padding-left: 49rpx;
}
.box22 {
  padding-left: 49rpx;
}
.box23 {
  padding-left: 49rpx;
}
.box24 {
  padding-left: 49rpx;
}
.box25 {
  padding-left: 49rpx;
}
.box2 {
  display: flex;
  flex-wrap: wrap;
  display: -webkit-flex;
  /* border: 1rpx solid red; */
}
</style>
